<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
        }
        .box{
            border: 1px solid black;
            padding: 20px;
        }
    </style>
</head>
<body>
    <!-- 
        通过JS引用数据规则实现父子组件的双向数据共享是未被单向数据流的规则的
        ！！！ 在市面存在多数组件UI框架，都会大量使用引用规则数据共享模式
                ==> 简化开发者对UI框架的使用难度
    -->
    <div id="app" class="box">
        <h4>父组件</h4>
        <p>obj.msg:{{ obj.msg }}</p>
        <input type="text" v-model="obj.msg">
        <br><br>
        <comp-one :obj="obj"></comp-one>
    </div>

    <script type="text/x-template" id="compOne">
        <div class="box">
            <h4>子组件</h4>
            <p>obj.msg:{{ obj.msg }}</p>
            <input type="text" v-model="obj.msg">
        </div>
    </script>

    <script type="module"> 
        import { createApp } from "../../assets/vue3/vue.esm-browser.js";
        const app = createApp({
            data(){
                return {
                    obj:{
                        msg:"数据变量msg"
                    }
                }
            }
        });
        
        app.component("CompOne",{
            template:"#compOne",
            // props 拦截器对于属性的只读判断仅限于 栈中值的判断
            props:["obj"]
        })

        app.mount("#app")
    </script>
</body>
</html>